<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <div id="container"></div>
  <button id="btn-change">change</button>

  <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
  <script type="text/javascript">
    const data = [
      {
        name: '张三',
        age: '20',
        address: '北京'
      },
      {
        name: '李四',
        age: '21',
        address: '上海'
      },
      {
        name: '王五',
        age: '22',
        address: '广州'
      }
    ]

    // 渲染函数
    function render(data) {
      const $container = $("#container");

      // 清空容器容器
      $container.html('');

      // 拼接table
      const $table = $("<table>");
      $table.append($('<tr><td>name</td><td>age</td><td>address</td>/tr>'));
      data.forEach(item => {
        $table.append($('<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.address + '</td>/tr>'))
      })

      // 渲染到页面
      $container.append($table)
    }

    $('#btn-change').click(() => {
      data[0].name = "码路";
      data[1].age = "30";
      // re-render 重新渲染
      render(data);
    })

    // 页面加载完立刻执行（初次渲染）
    render(data);

  </script>
</body>

</html>